<template>
  <div v-show="$route.name === 'process-detail'">
    <!-- 面包屑导航区域 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/process-list' }">肉码生产成本记录
    </el-breadcrumb-item>
      <el-breadcrumb-item>肉码生产成本详情</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片视图区域--订单数据修改 -->
    <el-card>
      <div style="margin-bottom: 20px;">肉码生产成本详情</div>
      <el-row :gutter="20">
        <!-- 原料区域 -->
        <el-col :span="11">
          <el-card>
            <div style="margin-bottom: 20px;">原料</div>
            <!-- 原料列表区域 -->
            <el-table :data="materialList" border stripe height="520" :summary-method="materialSummaries" :show-summary="groupid === 0 ? true : false" ref="table">
              <el-table-column label="分类" align="center" min-width="70" prop="category"></el-table-column>
              <el-table-column label="原料名称" align="center" min-width="100" prop="goods"></el-table-column>
              <el-table-column label="单位" align="center" min-width="50" prop="unit"></el-table-column>
              <el-table-column label="成本" align="center" min-width="80" prop="cost" v-if="groupid === 0"></el-table-column>
              <el-table-column label="数量" align="center" min-width="60" prop="count"></el-table-column>
              <el-table-column label="总成本" align="center" min-width="90" prop="total" v-if="groupid === 0"></el-table-column>
            </el-table>
          </el-card>
        </el-col>
        <!-- 成品数据 -->
        <el-col :span="13">
          <el-card>
            <div style="margin-bottom: 20px;">肉码</div>
            <!-- 成品列表区域 -->
            <el-table :data="productList" border stripe height="520" :summary-method="productSummaries" :show-summary="groupid === 0 ? true : false" ref="table2">
              <el-table-column label="分类" align="center" min-width="70" prop="category"></el-table-column>
              <el-table-column label="肉码名称" align="center" min-width="100" prop="goods"></el-table-column>
              <el-table-column label="单位" align="center" min-width="50" prop="unit_in"></el-table-column>
              <el-table-column label="数量" align="center" min-width="60" prop="count"></el-table-column>
              <el-table-column label="实际成本" align="center" min-width="80" prop="cost" v-if="groupid === 0"></el-table-column>
              <el-table-column label="实际总成本" align="center" min-width="90" prop="total_cost" v-if="groupid === 0"></el-table-column>
              <el-table-column label="参考成本" align="center" min-width="80" prop="price_in" v-if="groupid === 0"></el-table-column>
              <el-table-column label="总参考成本" align="center" min-width="90" prop="total" v-if="groupid === 0"></el-table-column>
            </el-table>
          </el-card>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-button  @click="back" style="margin-top: 20px;">返回</el-button>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>
<script>
export default {
  data() {
    return {
      groupid: '',
      process_time: '',
      flag: 0,
      // ===== 原料模块 =====
      // 原料表格
      materialList: [],
      // ===== 肉码模块 =====
      // 肉码表格
      productList: [],
    }
  },
  mounted() {
    this.getUserInfo()
    this.getProcess()
  },
  updated() {
    var _self = this
    this.$nextTick(() => {
      _self.$refs.table.doLayout()
      _self.$refs.table2.doLayout()
    })
  },
  methods: {
    // 获取用户信息
    async getUserInfo() {
      const { data: result } = await this.$http.get('/user/' + localStorage.userid)
      if (result.status !== 200) return this.$message.error(result.msg)
      this.groupid = result.data.groupid === '' ? '' : result.data.groupid * 1
    },
    // 返回
    back () {
      localStorage.removeItem('ProcessTime')
      this.$router.push({ 'name': 'process-list' })
    },
    // 获取当日数据
    getProcess() {
      this.process_time = this.$route.params.process_time
      this.flag = this.$route.params.flag
      if (this.$route.params.process_time) {
        this.process_time = this.$route.params.process_time
        localStorage.setItem('ProcessTime', this.$route.params.process_time)
      } else {
        this.process_time = localStorage.getItem('ProcessTime')
      }
      if (this.process_time) {
        // 获取当日详情数据
        this.getProcessData()
      }
    },
    // 获取当日详情数据
    async getProcessData() {
      const myDate = new Date(this.process_time)
      const year = myDate.getFullYear() // 获取当前年份
      const month = myDate.getMonth() + 1 // 获取当前月份(0-11,0代表1月所以要加1);
      const day = myDate.getDate() // 获取当前日（1-31）
      // 日期格式：2019/07/29 - 2019/07/29
      const { data: result } = await this.$http.get('/process/detail', { params: {processTime:  `${year}-${month}-${day}`} })
      if (result.status !== 200) {
        return this.$message.error(result.msg)
      }
      this.materialList = result.data.materialList
      this.productList = result.data.productList
    },
    // ====== 原料区域 ======
    // 原料总成本合计
    materialSummaries(param) {
      const { columns, data } = param;
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '合计'
          return
        }
        if (index !== 5) {
          sums[index] = ''
          return
        }
        else {
          const values = data.map(item => Number(item[column.property]))
          if (!values.every(value => isNaN(value))) {
            var aa = values.reduce((prev, curr) => {
              const value = Number(curr);
              if (!isNaN(value)) {
                return prev + curr;
              } else {
                return prev;
              }
            }, 0)
            sums[index] = parseFloat(aa).toFixed(2)
          } else {
            sums[index] = '';
          }
        }
      })
      return sums
    },
    // ====== 肉码区域 ======
    // 成品总成本合计
    productSummaries(param) {
      const { columns, data } = param;
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '合计'
          return
        }
        if (index !== 5 && index !== 7) {
          sums[index] = ''
          return
        }
        else {
          const values = data.map(item => Number(item[column.property]));
          if (!values.every(value => isNaN(value))) {
            var aa = values.reduce((prev, curr) => {
              const value = Number(curr);
              if (!isNaN(value)) {
                return prev + curr;
              } else {
                return prev;
              }
            }, 0)
            sums[index] = parseFloat(aa).toFixed(2)
          } else {
            sums[index] = '';
          }
        }
      })
      return sums
    },
  }
}
</script>